<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="https://unpkg.com/vue@next"></script>
		<link rel="stylesheet" href="css/loading.css">
		<style>
			body {
				margin: 0;
				padding: 0;
			}
			
			#app {
				width: 100%;
				height: 100vh;
				background: linear-gradient(to right, #7474bf, #348ac7);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #FFF;
			}
			
			.box {
				width: 400px;
				height: 350px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.box .v-text {
				width: 100%;
				height: 100%;
			}
			
			.btn {
				width: 200px;
				height: 150px;
				margin-top: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				user-select: none;
			}
			
			.btn .loading-btn {
				width: 100%;
				display: flex;
				justify-content: space-between;
			}
			
			.btn .loading-btn .loading-btn-item {
				width: 35px;
				height: 35px;
				background: rgba(0, 0, 0, 0.2);
				border-radius: 50%;
				text-align: center;
				line-height: 35px;
				cursor: pointer;
			}
			
			.btn .change-btn {
				width: 100px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background-color: rgba(0, 0, 0, 0.2);
				cursor: pointer;
				border-radius: 20px;
				font-size: 13px;
				letter-spacing: 2px;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div class="box">
				<div class="v-html" v-html="loading[index]" v-if="isHtml"></div>
				<div class="v-text" v-text="loading[index]" v-else></div>
				<div></div>
			</div>
			<div class="btn">
				<div class="change-btn" @click="changeShow">{{isHtml ? "查看源码" : "查看示例"}}</div>
				<div class="loading-btn">
					<div class="loading-btn-item" @click="index=0">1</div>
					<div class="loading-btn-item" @click="index=1">2</div>
					<div class="loading-btn-item" @click="index=2">3</div>
				</div>
			</div>
		</div>

		<script>
			const app = {
				data() {
					return {
						loading: [`<div class="sk-chase">
                    <div class="sk-chase-dot"></div>
                    <div class="sk-chase-dot"></div>
                    <div class="sk-chase-dot"></div>
                    <div class="sk-chase-dot"></div>
                    <div class="sk-chase-dot"></div>
                    <div class="sk-chase-dot"></div>
                  </div>`,
							`<div class="spinner">
                    <div class="rect1"></div>
                    <div class="rect2"></div>
                    <div class="rect3"></div>
                    <div class="rect4"></div>
                    <div class="rect5"></div>
                  </div>`,
							`<div class="sk-cube-grid">
                    <div class="sk-cube sk-cube1"></div>
                    <div class="sk-cube sk-cube2"></div>
                    <div class="sk-cube sk-cube3"></div>
                    <div class="sk-cube sk-cube4"></div>
                    <div class="sk-cube sk-cube5"></div>
                    <div class="sk-cube sk-cube6"></div>
                    <div class="sk-cube sk-cube7"></div>
                    <div class="sk-cube sk-cube8"></div>
                    <div class="sk-cube sk-cube9"></div>
                  </div>`
						],
						isHtml: true,
						index: 0
					}
				},
				methods: {
					changeShow() {
						this.isHtml = !this.isHtml
					}
				}
			};
			Vue.createApp(app).mount("#app");
		</script>
	</body>

</html>